import React, {useState} from "react";
import {Modal, Button} from "antd";
import TreeSelect from "components/flowdetailpannel/TreeSelect";
import _uniqBy from "lodash/uniqBy";
import _remove from 'lodash/remove';
import {openNotificationWithIcon} from "utils/comm";
import UsersTags from "../usersTags/UsersTags";

import styles from './ReissueConfigComponent.less';

const ReissueConfigComponent = (props) => {

  const {visible, handleClose, dispatch, appId, taskId = '', processInstanceId = '', getFlowRecords} = props;
  const [selectedList, setSelectedList] = useState([]);
  const [treeRef, setTreeRef] = useState({});

  const handleDelSelect = (delItem) => {
    _remove(selectedList, (item) => item.code === delItem.code);
    setSelectedList([...selectedList]);
  }

  const onCheckedRows = (newSelectedRowKeys) => {
    const tmpList = _uniqBy(newSelectedRowKeys, 'code');
    setSelectedList(tmpList);
  };

  const getTreeRef = (type, treeThis) => {
    treeRef[type] = treeThis;
    setTreeRef(treeRef);
  };

  const handleClear = () => {

    const {deleteData, setTreeSelectData} = treeRef.STA;

    setSelectedList([]);

    if (deleteData) {
      deleteData([])
    }
    if (setTreeSelectData) {
      setTreeSelectData([], []);
    }
  }

  const handleOk = () => {

    const userCode = sessionStorage.getItem("USER_CODE") ?? '';
    const userName = sessionStorage.getItem("USER_NAME") ?? '';

    dispatch({
        type: "FlowChart/supplySignTask",
        payload: {
          supplyPersonList: selectedList,
          processInstanceId,
          taskId,
          userCode,
          userName,
        },
      }
    ).then(({errCode}) => {
        if (errCode !== 0) {
          openNotificationWithIcon("error", "", "补发失败");
        } else {
          openNotificationWithIcon("success", "", "补发成功");
          if (getFlowRecords && (getFlowRecords instanceof Function)) {
            getFlowRecords()
          }
        }
        handleClose();
        handleClear();
      }
    );
  }

  return (
    <Modal
      title='配置补发人员'
      visible={visible}
      onOk={handleOk}
      destroyOnClose
      onCancel={handleClose}
    >
      <div className={styles.root}>

        <div className={styles.selectContent}>
          <div style={{margin: '4px', minWidth: '100px'}}>
            已选择办理人:
          </div>

          <div>
            {selectedList.map(item => {
              return (
                <UsersTags
                  key={`${item.type}_${item.code}`}
                  label={item.name}
                  onClick={() => handleDelSelect(item)}
                />
              );
            })}
          </div>

          <Button
            style={{margin: '4px'}}
            size='small'
            onClick={handleClear}
            type='link'
          >
            清空
          </Button>
        </div>

        <TreeSelect
          getTreeRef={treeThis => getTreeRef("STA", treeThis)}
          appId={appId}
          directoryTree
          dispatch={dispatch}
          type="STA"
          onCheckedRows={onCheckedRows}
          defaultSelectData={selectedList}
        />


      </div>
    </Modal>
  );
}

export default ReissueConfigComponent;
